<template>
  <div>
    <!-- 三级导航分类 -->
    <TypeNav />

    <!-- 轮播+右分类 -->
    <ListContainer />

    <!-- 今日推荐 -->
    <Recommend />

    <!-- 商品排行 -->
    <Rank />

    <!-- 猜你喜欢 -->
    <Like />

    <!-- 楼层 -->
    <Floor v-for="(floor, index) in floorList" :key="floor.id" :floor="floor" :index="index" />

    <!-- 品牌 -->
    <Brand />
  </div>
</template>

<script>
// import TypeNav from './TypeNav'
import ListContainer from './ListContainer'
import Recommend from './Recommend'
import Rank from './Rank'
import Like from './Like'
import Floor from './Floor'
import Brand from './Brand'

import { mapState, mapActions } from 'vuex'

export default {
  name: 'SphHome',
  components: {
    // TypeNav,
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand
  },
  created() {
    // 在这个阶段，Vue 只是进行数据劫持、数据代理而已
    // 如果在里面写了方法，只是帮你去调用，而不会等待你的数据返回
    // 获取轮播图数据
    this.getSwiperData()
    // 获取楼层数据
    this.getFloorData()
  },
  methods: {
    ...mapActions('home', ['getSwiperData', 'getFloorData'])
  },
  computed: {
    ...mapState('home', ['floorList'])
  }
}
</script>

<style lang="less" scoped></style>
